<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>可信空间管理</title>
    <link rel="stylesheet" th:href="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css}">
    <script th:src="@{//cdn.jsdelivr.net/npm/jquery@3.6.0/dist/jquery.min.js}"></script>
    <script th:src="@{//cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js}"></script>
</head>
<body>
<div class="container mt-4">
    <!-- 搜索区域 -->
    <div class="card mb-4">
        <div class="card-body">
            <!-- 使用Flex布局 -->
            <div class="d-flex align-items-center">
                <!-- 左对齐的连接器名称 -->
                <div class="me-auto fw-bold text-nowrap" th:text="'接入连接器: ' + ${acconName}"></div>

                <!-- 居中的搜索区域 -->
                <div class="d-flex justify-content-center w-100">
                    <div class="mx-2" style="width: 60%;"> <!-- 控制搜索框宽度 -->
                        <input type="text" class="form-control" name="searchValue" placeholder="关键词">
                    </div>
                    <div class="mx-2">
                        <button class="btn btn-primary" id="btnSearch">搜索</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 操作按钮 -->
    <div class="d-flex justify-content-start mb-3">
        <button class="btn btn-success me-2" id="btnAdd">新增</button>
        <button class="btn btn-danger" id="btnBatchDelete">批量删除</button>
    </div>

    <!-- 数据表格 -->
    <table class="table table-hover table-bordered" id="dataTable">
        <thead class="table-light">
        <tr>
            <th><input type="checkbox" id="selectAll"></th>
            <th>ID</th>
            <th>空间名称</th>
            <th>存储大小(GB)</th>
            <th>目的</th>
            <th>有效期(天)</th>
            <th>参与方</th>
            <th>操作</th>
        </tr>
        </thead>
        <tbody id="dataTable">
        <!-- 数据由JS动态填充 -->
        </tbody>
    </table>

    <!-- 分页控件 -->
    <nav>
        <ul class="pagination justify-content-end" id="pagination"></ul>
    </nav>
    <!-- 在<body>标签内添加对话框容器 -->
    <div id="dialogContainer"></div>
</div>

<script>
    $(function() {
        let currentPage = 1;
        const pageSize = 10;

        // 新增按钮点击事件
        $('#btnAdd').click(function() {
            // 动态加载对话框
            $('#dialogContainer').load('/ts/add', function() {
                // 初始化模态框
                const modal = new bootstrap.Modal('#addSpaceModal');
                modal.show();
                // 父页面中
                window.closeModal = function() {
                  modal?.hide();
                  loadData();
                };
            });
        });

        // 加载数据
        function loadData(page = 1) {
            $.ajax({
                url: '/ts/list',
                type: 'GET',
                data: {
                    pageNum: page,
                    pageSize: pageSize,
                    searchValue: $('input[name="searchValue"]').val()
                },
                success: function(result) {
                    renderTable(result.rows);
                    renderPagination(result.total, page);
                }
            });
        }

        // 渲染表格
        function renderTable(data) {
            const tbody = $('#dataTable tbody');
            tbody.empty();

            data.forEach(item => {
                const row = `
                <tr>
                    <td><input type="checkbox" class="row-check" value="${item.id}"></td>
                    <td>${item.id}</td>
                    <td>${item.name}</td>
                    <td>${item.quota}</td>
                    <td>${item.purpose}</td>
                    <td>${item.duration}</td>
                    <td>${item.participants}</td>
                    <td>
                        <button class="btn btn-sm btn-warning edit-btn" data-id="${item.id}">编辑</button>
                        <button class="btn btn-sm btn-danger delete-btn" data-id="${item.id}">删除</button>
                    </td>
                </tr>`;
                tbody.append(row);
            });

            // 绑定操作事件
            $('.edit-btn').click(onEdit);
            $('.delete-btn').click(onDelete);
        }

        // 渲染分页
        function renderPagination(total, currentPage) {
            const totalPages = Math.ceil(total / pageSize);
            const pagination = $('#pagination');
            pagination.empty();

            // 上一页
            pagination.append(`<li class="page-item ${currentPage === 1 ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage - 1}">上一页</a>
            </li>`);

            // 页码
            for (let i = 1; i <= totalPages; i++) {
                pagination.append(`<li class="page-item ${i === currentPage ? 'active' : ''}">
                    <a class="page-link" href="#" data-page="${i}">${i}</a>
                </li>`);
            }

            // 下一页
            pagination.append(`<li class="page-item ${currentPage === totalPages ? 'disabled' : ''}">
                <a class="page-link" href="#" data-page="${currentPage + 1}">下一页</a>
            </li>`);

            // 绑定分页事件
            $('.page-link').click(function(e) {
                e.preventDefault();
                const page = $(this).data('page');
                loadData(page);
            });
        }

        // 编辑操作
        function onEdit() {
            const id = $(this).data('id');
            // 这里实现编辑逻辑
            alert(`编辑ID: ${id}`);
        }

        // 删除操作
        function onDelete() {
            if (!confirm('确定删除该记录?')) return;

            const id = $(this).data('id');
            $.ajax({
                url: `/ts/delete/${id}`,
                type: 'DELETE',
                success: function() {
                    loadData(currentPage);
                }
            });
        }

        // 批量删除
        $('#btnBatchDelete').click(function() {
            const selectedIds = $('.row-check:checked').map(function() {
                return $(this).val();
            }).get();

            if (selectedIds.length === 0) {
                alert('请选择要删除的记录');
                return;
            }

            if (!confirm(`确定删除选中的${selectedIds.length}条记录?`)) return;

            $.ajax({
                url: '/ts/delete/' + selectedIds.join(','),
                type: 'DELETE',
                success: function() {
                    loadData(currentPage);
                }
            });
        });

        // 全选/取消全选
        $('#selectAll').change(function() {
            $('.row-check').prop('checked', this.checked);
        });

        // 搜索按钮
        $('#btnSearch').click(function() {
            loadData();
        });

        // 初始化加载数据
        loadData();
    });
</script>
</body>
</html>